<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title th:text="${pageTitle}"></title>
    <div data-th-replace="layout/head-top"></div>
    <link th:if="${material['typeKey']}=='ARTICLE'" rel="stylesheet" type="text/css" th:href="@{{path}/common/v3/summernote/summernote-bs3.css?v={v}(path=${staticPath},v=${v})}"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInLeft">
    <div th:if="${tag}==0">
        <div data-th-replace="common/functionDepict"></div>
    </div>
    <div>
        <div class="row">
            <div class="pt10">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>填写信息</h5>
                        </div>
                        <div class="ibox-content clearfix pt10">
                            <input type="hidden" id="_subjectIds" th:value="${material['subjectIds']}"/>
                            <form id="materialFrom">
                                <input type="hidden" name="id" th:value="${material['id']}">
                                <input type="hidden" name="typeKey" th:value="${material['typeKey']}">
                                <input type="hidden" name="mouldId" th:value="${material['mouldId']}">
                                <input name="datums" th:value="${material['datums']}" type="hidden"/>
                                <input type="hidden" name="subjectIds" th:if="${tag}!=0" th:value="${material['subjectIds']}"/>
                                <div class="form-horizontal">
                                    <div th:if="${material['typeKey']}=='VIDEO' or ${material['typeKey']}=='AUDIO' or ${material['typeKey']}=='LIVE'" hidden>
                                        <div class="form-group">
                                            <div class="col-sm-8">
                                                <select data-placeholder="选择服务商" name="playType" id="playType" class="chosen-select-no-search" style="width: 100%;" tabindex="3">
                                                    <th:block th:if="${material['typeKey']}!='LIVE'">
                                                        <option th:if="${vlasProviderMap['type']}=='96K' or ${vlasProviderMap['isK96keVideo']} =='ON'" value="96K"></option>
                                                        <option th:if="${vlasProviderMap['type']}=='CC' and ${vlasProviderMap['ccAppKey']} !=''" value="CC"></option>
                                                    </th:block>
                                                    <th:block th:if="${material['typeKey']}=='LIVE'">
                                                        <option th:if="${vlasProviderMap['type']}=='CC'" value="CC"></option>
                                                        <option th:if="${vlasProviderMap['type']}=='TT'" value="TT"></option>
                                                    </th:block>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                <th:block th:if="${material['typeKey']}=='VIDEO'">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label text-right">
                                                <i class="c-red">*</i> 对应教学视频</label>
                                            <div class="col-sm-8">
                                                <div>
                                                    <button class="btn btn-primary btn-outline" type="button" id="selectVideo">
                                                        <i class="fa fa-mouse-pointer"></i>&nbsp;选择视频
                                                    </button>
                                                    <span>或</span>
                                                    <button class="btn btn-primary btn-outline" type="button" id="uploadVideo">
                                                        <i class="fa fa-plus"></i>&nbsp;上传视频
                                                    </button>
                                                    <span class="ml10"><small class="fs12 c-999"><i class="fa fa-lightbulb-o"></i> 上传完成后弹窗将自动关闭</small></span>
                                                </div>
                                                <span class="help-block m-b-none c-999">1、选择视频：来源于在 “云服务 -> 点播管理” 中已事先批量上传的教学音视频资源且已完成了转码操作。<br />2、上传视频：自主上传单个本地音视频资源 </span>
                                            </div>
                                        </div>
                                    </th:block>
                                    <th:block th:if="${material['typeKey']}=='AUDIO' ">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label text-right">
                                                <i class="c-red">*</i> 对应教学音频</label>
                                            <div class="col-sm-8">
                                                <div>
                                                    <button class="btn btn-primary btn-outline" type="button" id="selectVideo">
                                                        <i class="fa fa-mouse-pointer"></i>&nbsp;选择音频
                                                    </button>
                                                    <span>或</span>
                                                    <button class="btn btn-primary btn-outline" type="button" id="uploadVideo">
                                                        <i class="fa fa-plus"></i>&nbsp;上传音频
                                                    </button>
                                                    <span class="ml10"><small class="fs12 c-999"><i class="fa fa-lightbulb-o"></i> 上传完成后弹窗将自动关闭</small></span>
                                                </div>
                                                <span class="help-block m-b-none c-999">1、选择视频：来源于在 “云服务 -> 点播管理” 中已事先批量上传的教学音视频资源且已完成了转码操作。<br />2、上传视频：自主上传单个本地音视频资源 </span>
                                            </div>
                                        </div>
                                    </th:block>


                                    <div th:if="${material['typeKey']}=='LIVE'" id="roomType">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label text-right "> <i class="c-red">*</i> 直播间类型</label>
                                            <div class="col-sm-8 radio i-checks">
                                                <label>
                                                    <input type="radio" value="0"  id="liveBilling1" name="liveBilling" th:disabled="${courseTypeKey} eq 'SMALL'?true:false" th:checked="${material['liveBilling']==0 || material['liveBilling'] == null} ?'true':'false'"><i></i> 大班直播
                                                </label>
                                                <label>
                                                    <input type="radio" value="1" id="liveBilling2"  name="liveBilling" th:checked="(${material['liveBilling']}==1 or ${courseTypeKey} eq 'SMALL' )?'true':'false'"><i></i> 小班直播
                                                </label>
                                            </div>
                                        </div>
                                        <div class="hr-line-dashed"></div>
                                    </div>
                                    <div th:if="${material['typeKey']}=='AUDIO' or ${material['typeKey']}=='VIDEO'">
                                        <div class="form-group">
                                            <label th:if="${material['typeKey']}=='VIDEO'" class="col-sm-2 control-label text-right "><i class="c-red">*</i> 对应视频码</label>
                                            <label th:if="${material['typeKey']}=='AUDIO'" class="col-sm-2 control-label text-right "><i class="c-red">*</i> 对应音频码</label>
                                            <div class="col-sm-8">
                                                <input class="form-control validate-data" id="playUrl" name="playUrl" th:value="${material['playUrl']}" readonly>
                                                <span th:if="${material['typeKey']}=='VIDEO'" class="help-block m-b-none c-999">每个上传的视频资源至云服务后会自动转码生成对应的一条视频码。此处如选择了教学资源 对应视频码会自动添加</span>
                                                <span th:if="${material['typeKey']}=='AUDIO'" class="help-block m-b-none c-999">每个上传的音频资源至云服务后会自动转码生成对应的一条视频码。此处如选择了教学资源 对应视频码会自动添加</span>
                                            </div>
                                        </div>
                                        <div class="hr-line-dashed"></div>
                                    </div>
                                    <div th:if="${material['typeKey']}=='LIVE' and ${vlasProviderMap['type']}=='CC'">
                                        <div class="form-group">
                                            <label th:if="${material['typeKey']}=='LIVE'"  class="col-sm-2 control-label text-right " id="liveCode"><i class="c-red">*</i> 直播间</label>
                                            <div class="col-sm-8">
                                                <div th:if="${material['typeKey']}=='LIVE'">
                                                    <a href="javascript:void(0)" class="btn btn-primary btn-outline" id="newCreateCCLive">
                                                        <i class="fa fa-plus"></i> 新建直播间
                                                    </a>
                                                </div>
                                                <input class="form-control validate-data" id="playUrl" name="playUrl" th:value="${material['playUrl']}" type="hidden">
                                            </div>
                                        </div>
                                        <div class="hr-line-dashed"></div>
                                    </div>
                                    <th:block th:if="${material['typeKey']}=='LIVE'">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label text-right" ><i class="c-red">*</i> 直播间属性</label>
                                            <div class="col-sm-8" th:if="${vlasProviderMap['type']}=='CC'">
                                                <div class="bg-f2 row pt10 ml5">
                                                    <div class="m-l mt5">
                                                        <div class="form-group">
                                                            <div class="col-sm-10">
                                                                <div class="input-group">
                                                                    <span class="input-group-addon"><i class="c-red">*</i> 直播间ID</span>
                                                                    <input class="form-control" id="roomId" name="roomId" th:value="${material['roomId']}" type="text" readonly/>
                                                                </div>
                                                                <div class="input-group m-t">
                                                                    <span class="input-group-addon"><i class="c-red">*</i> 讲师参加码</span>
                                                                    <input class="form-control" id="teacherCode" name="teacherCode" th:value="${material['teacherCode']}" type="text" readonly/>
                                                                </div>
                                                                <div class="input-group m-t">
                                                                    <span class="input-group-addon"><i class="c-red">*</i> 学员参加码</span>
                                                                    <input class="form-control" id="studentCode" name="studentCode" th:value="${material['studentCode']}" type="text" readonly/>
                                                                </div>
                                                                <div class="input-group m-t">
                                                                    <span class="input-group-addon"><i class="c-red">*</i> 管理员参加码</span>
                                                                    <input class="form-control" id="adminCode" name="adminCode" th:value="${material['adminCode']}" type="text" readonly=""/>
                                                                </div>
                                                                <input type="hidden" name="adminUrl" id="adminUrl">
                                                                <input type="hidden" name="studentUrl" id="studentUrl">
                                                                <input type="hidden" name="teacherUrl" id="teacherUrl">
                                                                <div class="hr-line-dashed"></div>
                                                                <div class="form-group">
                                                                    <div class="m-l">
                                                                        <i class="c-red">*</i>
                                                                        <strong>直播时间</strong>
                                                                        <span class="c-999"> （直播开始时间和结束时间）</span>
                                                                    </div>
                                                                    <div class="col-sm-12">
                                                                        <input readonly id="startDate" name="liveBeginTime" th:value="${material['liveBeginTime']}" class="laydate-icon form-control layer-date" placeholder="YYYY-MM-DD hh:mm:ss"/>
                                                                        _
                                                                        <input readonly id="endDate" name="liveEndTime" th:value="${material['liveEndTime']}" class="laydate-icon form-control layer-date" placeholder="YYYY-MM-DD hh:mm:ss">
                                                                    </div>
                                                                </div>
                                                                <div class="form-group preEnterTime">
                                                                    <div class="m-l">
                                                                        <strong>提前进入时间</strong>
                                                                        <span class="c-999"> （学员可提前进入直播间的时间，单位为分钟）</span>
                                                                    </div>
                                                                    <div class="col-sm-12">
                                                                        <div class="radio i-checks">
                                                                            <label><input type="radio" th:checked="${material['preEnterTime']}==0 or  ${material['preEnterTime']} ==null" value="0" name="preEnterTime" checked> <i></i> 0分钟</label>
                                                                            <label><input type="radio"  th:checked="${material['preEnterTime']}==5" value="5" name="preEnterTime"> <i></i> 5分钟</label>
                                                                            <label><input type="radio"  th:checked="${material['preEnterTime']}==10" value="10" name="preEnterTime"> <i></i> 10分钟</label>
                                                                            <label><input type="radio" th:checked="${material['preEnterTime']}==15" value="15" name="preEnterTime"> <i></i> 15分钟</label>
                                                                            <label><input type="radio" th:checked="${material['preEnterTime']}==20" value="20" name="preEnterTime"> <i></i> 20分钟</label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-8"  th:if="${vlasProviderMap['type']}=='TT'">
                                                <div class="bg-f2 row pt10 ml5">
                                                    <div class="m-l mt5">
                                                        <div class="form-group">
                                                            <div class="col-sm-11">
                                                                <div class="input-group">
                                                                    <span class="input-group-addon"><i class="c-red">*</i> 直播间名称</span>
                                                                    <input placeholder="请输入直播间名称，建议在12字以内" class="form-control" id="liveName" name="liveName"  th:value="${material['liveName']}" type="text"/>
                                                                </div>
                                                                <div class="input-group m-t">
                                                                    <span class="input-group-addon"><i class="c-red">*</i> 直播间公告</span>
                                                                    <textarea placeholder="请输入直播间公告信息" class="form-control" id="liveNotice" name="liveNotice" th:text="${material['liveNotice']}" ></textarea>
                                                                </div>
                                                                <div class="form-group m-t">
                                                                    <div class="m-l">
                                                                        <i class="c-red">*</i>
                                                                        <strong>直播时间</strong>
                                                                        <span class="c-999"> （直播开始时间和结束时间60小时以内）</span>
                                                                    </div>
                                                                    <div class="col-sm-12">
                                                                        <input  name="liveBeginTime" id="startDate" readonly th:value="${material['liveBeginTime']}" class="laydate-icon form-control layer-date" placeholder="YYYY-MM-DD hh:mm:ss"/>
                                                                        _
                                                                        <input  name="liveEndTime" id="endDate" readonly th:value="${material['liveEndTime']}" class="laydate-icon form-control layer-date" placeholder="YYYY-MM-DD hh:mm:ss">
                                                                    </div>
                                                                </div>
                                                                <div class="form-group preEnterTime">
                                                                    <div class="m-l">
                                                                        <strong>提前进入时间</strong>
                                                                        <span class="c-999"> （学员、老师可提前进入直播间时间）</span>
                                                                    </div>
                                                                    <div class="radio i-checks">
                                                                        <label><input type="radio" checked value="20" name="preEnterTime"> <i></i> 20分钟</label>
                                                                    </div>
                                                                </div>
                                                                <div id="maxUsers-div" th:style="${courseTypeKey} eq 'SMALL' ? '' : 'display: none'">
                                                                    <div class="input-group">
                                                                        <span class="input-group-addon"><i class="c-red">*</i> 最大支持人数</span>
                                                                        <input class="form-control validate-data" name="maxUsers" th:value="${material['maxUsers']}" type="text">
                                                                    </div>
                                                                    <span class="c-999"> （小班课直播间最大30人进入，最多支持7人互动）</span>
                                                                </div>
                                                                <div id="liveType-div" th:style="${courseTypeKey} eq 'SMALL' ? 'display: none' : ''">
                                                                    <div class="form-group">
                                                                        <div class="m-l">
                                                                            <i class="c-red">*</i>
                                                                            <strong>大班直播间类型</strong>
                                                                            <span class="c-999">（标准大班支持1000人以内、超大班支持1000人以上。均最多支持两人互动）</span>
                                                                        </div>
                                                                        <div class="col-sm-8 radio i-checks">
                                                                            <label><input type="radio" value="1" name="liveType" th:checked="${material['liveType']} eq '1'"><i></i> 标准大班</label>
                                                                            <label class="m-l"><input type="radio" value="0" name="liveType" th:checked="${material['liveType']} eq '0'"><i></i> 超大班</label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="hr-line-dashed"></div>
                                    </th:block>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label text-right"><i class="c-red">*</i> 素材设置</label>
                                        <div class="col-sm-8">
                                            <div class="bg-f2 row pt10 ml5">
                                                <div class="m-l mt5">
                                                    <div class="form-group">
                                                        <div class="m-l">
                                                            <i class="c-red">*</i>
                                                            <strong>素材名称</strong>
                                                            <span class="c-999"> （素材名称，限40字以内）</span>
                                                        </div>
                                                        <div class="col-sm-10">
                                                            <input class="form-control validate-data" id="title" maxlength="40" name="name" th:value="${material['name']}" type="text">
                                                        </div>
                                                    </div>
                                                    <th:block th:if="${material['typeKey']}!='ARTICLE'">
                                                        <div class="form-group">
                                                            <div class="m-l">
                                                                <strong>素材时长</strong>
                                                                <span class="c-999"> （素材对应教学资源总时长）</span>
                                                            </div>
                                                            <div class="col-sm-10">
                                                                <input class="form-control validate-data " readonly="readonly" id="videoDuration" name="videoDuration" th:value="${material['videoDuration']}" type="text">
                                                            </div>
                                                        </div>
                                                    </th:block>
                                                    <th:block th:if="${material['typeKey']}=='ARTICLE'">
                                                        <div class="form-group">
                                                            <div class="m-l">
                                                                <i class="c-red">*</i>
                                                                <strong>素材时长</strong>
                                                                <span class="c-999"> （读取该文章应有的时长）</span>
                                                            </div>
                                                            <div class="col-sm-10">
                                                                <input class="form-control validate-data " name="videoDuration" th:value="${material['videoDuration']}" type="text">
                                                            </div>
                                                        </div>
                                                    </th:block>
                                                    <div th:if="${tag}==0">
                                                        <div class="form-group">
                                                            <input type="hidden" name="subjectIds" id="subjectIds" th:value="${material['subjectIds']}"/>
                                                            <div class="m-l">
                                                                <i class="c-red">*</i>
                                                                <strong>专业项目</strong>
                                                                <span class="c-999"> （选择所属专业科目或去新建）</span>
                                                                <a href="javascript:void(0)" class="m-l" onclick="getRedirectMenu(baseloaction+'/admin/manage/subject/toSubjectList')"> 新建专业 <i class="fa fa-angle-right"></i></a>
                                                            </div>
                                                            <div class="col-sm-10">
                                                                <div id="material-subject-box"></div>
                                                                <div id="material-subject-context"></div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <div class="m-l">
                                                                <strong>隶属模块</strong>
                                                                <span class="c-999"> （非必填，选择此素材所属的模块）</span>
                                                            </div>
                                                            <div class="col-sm-10">
                                                                <div class="input-group" style="width: 100%">
                                                                    <select data-placeholder="选择所属模块" id="material-mould-select" name="material.mouldId" class="chosen-select" style="width: 100%;" tabindex="3">
                                                                        <option value="0">请选择模块</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div  th:if="${material['typeKey']}=='ARTICLE'">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label text-right"><i class="c-red">*</i> 文章简介</label>
                                            <div class="col-sm-8">
                                                <div class="ml10">
                                                    <textarea name="articleSummary" id="articleSummary" th:text="${material['articleSummary']}"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label text-right"><i class="c-red">*</i> 文章内容</label>
                                            <div class="col-sm-8">
                                                <div class="ml10">
                                                    <textarea name="articleContext" id="articleContext" th:text="${material['articleContext']}"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label text-right"><i class="c-red">*</i> 素材属性</label>
                                        <div class="col-sm-8">
                                            <div class="bg-f2 row pt10 ml5">
                                                <div class="m-l mt5">

                                                    <div class="form-group">
                                                        <div class="col-sm-10">
                                                            <p>
                                                                <button id="selectTeacher" class="btn btn-primary btn-outline" type="button"><i class="fa fa-plus"></i> 选择讲师</button>
                                                                <span class="c-999 m-l">此素材对应教学资源的讲师，此讲师将做为挂在对应课程章节的课程讲师</span>
                                                            </p>
                                                            <div id="teacher-div" class="well no-padding">
                                                                <ul class="list-group">
                                                                    <li class="list-group-item">
                                                                        <input id="teacherId" type="hidden" name="teacherId" th:value="${material['teacherId']}"/>
                                                                        <span class="pull-right" th:classappend="${#strings.isEmpty(material['teacherId'])} or ${material['teacherId']} <=0 ?'hide':''">
                                                                                <a href="javascript:void(0);" id="deleteTeacher" title="移除" class="c-999 fs14"><i class="fa fa-remove"></i></a>
                                                                            </span>
                                                                        <span class="fs14" id="teacherName" th:text="${material['teacher']}!=null?${material['teacher']['teacherName']}:'请选择讲师'">  </span>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group" id="admin">
                                                        <div class="m-l mt5">
                                                            <div class="form-group">
                                                                <div class="col-sm-10">
                                                                    <p>
                                                                        <button id="selectAssistant" class="btn btn-primary btn-outline" type="button" th:style="!${#strings.isEmpty(material['id'])} and  ${material['id']} >0  and ${material['typeKey']} == 'LIVE' and ${material['playType']}=='TT' ? 'display: none' : ''"><i class="fa fa-plus"></i> 选择助教</button>
                                                                        <span class="c-999 m-l">此讲师为可进入直播间的助教(不可修改)</span>
                                                                    </p>
                                                                    <div id="assistant-div" class="well no-padding">
                                                                        <ul class="list-group">
                                                                            <li class="list-group-item">
                                                                                <input id="assistantId" type="hidden" name="assistantId" th:value="${material['assistantId']}"/>
                                                                                <span class="pull-right"  th:classappend="!${#strings.isEmpty(material['id'])} and  ${material['id']} > 0 ?'hide':''">
                                                                                <a href="javascript:void(0);" id="deleteAssistant" title="移除" class="c-999 fs14"><i class="fa fa-remove"></i></a>
                                                                            </span>
                                                                                <span class="fs14" id="assistantName" th:text="${material['assistant']}!=null?${material['assistant']['teacherName']}:'请选择助教'">  </span>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div th:if="${tag}==0">
                                        <div class="hr-line-dashed"></div>
                                        <div class="form-group">
                                            <div class="col-sm-10 col-sm-offset-2">
                                                <button th:if="${#strings.isEmpty(material['id'])} or ${material['status']}==0 or ${material['status']}==1" class="btn btn-danger submitMaterial" data-status="2" type="button">保存，并发布</button>
                                                <button class="btn btn-primary ml10 submitMaterial" data-status="1" type="button">保存，返回</button>
                                                <button class="btn btn-white ml10" type="button" id="saveCancel">取消</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div data-th-replace="layout/head-footer"></div>
<script th:if="${material['typeKey']}=='LIVE'" type="text/javascript" th:src="@{{path}/admin/libs/plugins/layer/laydate/laydate.js?v={v}(path=${staticPath},v=${v})}"></script>
<script th:if="${material['typeKey']}=='ARTICLE'" type="text/javascript" th:src="@{{path}/common/summernote/summernote.min.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/admin/business/manage/teacher/common-select-teacher-list.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/admin/business/course/live/create-live.js?v={v}(path=${staticPath},v=${v})}"></script>
<script th:src="@{{path}/admin/business/course/material/save_material.js?v={v}(path=${staticPath},v=${v})}"></script>
<script th:src="@{{path}/admin/business/course/cloud/select-common-video.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/common/qrcode/jquery.qrcode.min.js?v={v}(path=${staticPath}, v=${v})}"></script>
<script  th:inline="javascript">
    var liveType = [[${vlasProviderMap['type']}]];
</script>
</body>
</html>
